<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="625px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <div class="user-list radio" v-if="ldkcList.length !=0">
                    <el-radio-group v-model="form.radio">
                        <el-radio :label="item" v-for="(item,i) in ldkcList" :key="i" @change="clk">
                            <div class="list box box-align-center mt20">
                                <div class="item box box-align-center box-pack-between">
                                    <div class="box box-pack-start box-align-center ml20">
                                        <el-image :src="item.image" class="img"></el-image>
                                        <div class="box box-tb box-pack-start box-align-start ml20">
                                            <h3 style="width: 200px;overflow: hidden;text-align: left;">{{item.name}}</h3>
                                            <span class="mt10 mb10">共{{item.cnt}}章</span>
                                            <span>主编： {{item.chiefEditor}}</span>
                                        </div>
                                    </div>
<!--                                    <div class="box box-tb box-pack-between box-align-end right">
                                        <span class="title">{{item.material}}</span>
                                    </div> -->
                                </div>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div v-else>
                    <el-empty class="box box-tb box-align-center" description="暂无数据" :image-size	="100"></el-empty>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()" :disabled="disabledbtn==false">确 定</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '添加课程任务'
            },
        },
        data() {
            return {
                ldkcList:[],
                loginInfo: this.$store.state.loginInfo,
                form: {
                    radio: ''
                },
                disabledbtn:false,
                schoolid:this.$store.state.schoolId,
            };
        },
        methods: {
            getCourseList() {
                this.form.radio = '';
                let params = {
                    schoolid: this.schoolid
                };
                this.$api.jyz.getCourseList(params).then(res => {
                    if (res.code == '0') {
                        this.ldkcList = res.list
                        console.log(this.ldkcList)
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleClose() {
                this.$emit('clickClose')
            },
            onSubmit() {
                this.$emit('saveCous',this.form.radio)
                this.handleClose();
            },
            clk(){
                this.disabledbtn=true;
            }
        }
    };
</script>

<style scoped lang="scss">
    .upload-icon {
        width: 110px;
        height: 110px;
        background-color: #F0F1F8;
        line-height: 110px;
        color: #626BF1;
        font-size: 30px;
        border-radius: 10px;
    }

    .avatar {
        width: 110px;
        height: 110px;
    }

    .w100 {
        width: 100%;
    }

    .reset-form {
        padding: 0 20px;
    }


    .user-list {
        height: 500px;
        overflow-x: hidden;
        overflow-y: scroll;
        .checkbox__label {
            width: 80%;
        }

        .list {
            width: 500px;
            height: 86px;
            background: #F8F9FC;
            border: 1px solid #F8F9FC;
            border-radius: 12px;
        }

        .right{
            box-sizing: border-box;
            padding: 10px 0;
            width: 100px;
            height: 86px;
            .title {
                width: 134px;
                height: 20px;
                line-height: 20px;
                background: #F3F4FB;
                border-radius: 9px;
                color: #939FF4;
                font-size: 14px;
            }
        }

        .item {
            display: flex;
            width: 100%;
            margin-right: 30px;

            .img {
                width: 98px;
                height: 74px;
                border-radius: 12px;
            }
        }
    }


    //单选
    .user-list>>>.el-radio {
        width: 600px;
        margin-right: 0;
        display: flex;
        justify-content: center;
    }

    .user-list>>>.el-radio.is-checked .list {
        border: 1px solid #409eff;
    }

    .user-list>>>.el-radio__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-radio__input.is-checked+.el-radio__label {
        color: #000000;
    }

    .user-list>>>.el-radio__input.is-checked .el-radio__inner {
        border-color: #409eff;
        background: #409eff;
    }
</style>
